<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">盘点单详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100" v-if="detailData.approveStatus == '0' && detailData.status == '1'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="check()"
                        v-hasPermi="['system:stocktakingOrder:check']"
                    >审核</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="detailData.approveStatus == '1' && detailData.status == '2'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="startStock()"
                        v-hasPermi="['system:stocktakingOrder:startInventory']"
                    >开始盘点</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="detailData.status == '3'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="endStock()"
                        v-hasPermi="['system:stocktakingOrder:endInventory']"
                    >结束盘点</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="(detailData.countingTimes == '1' || detailData.countingTimes == '2') && detailData.status !== '4' && detailData.status !== '5' && detailData.status !== '6'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="againStock()"
                        v-hasPermi="['system:stocktakingOrder:againInventory']"
                    >再次盘点</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="detailData.status == '4' && detailData.countingTimes !== '3'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="endAgainStock()"
                        v-hasPermi="['system:stocktakingOrder:secondInventory']"
                    >再次盘点</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="detailData.status == '4'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="confirmDifference()"
                        v-hasPermi="['system:stocktakingOrder:confirmDifference']"
                    >确认差异</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="detailData.status == '5'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="cancelStock()"
                        v-hasPermi="['system:stocktakingOrder:revokeConfirm']"
                    >撤消确认</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="detailData.status == '5'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="confirmStock()"
                        v-hasPermi="['system:stocktakingOrder:resultConfirm']"
                    >结果确认</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : detailData.status == '7'}">草稿</span>
                        <span :class="{ 'active' : detailData.status == '1'}">待审核</span>
                        <span :class="{ 'active' : detailData.status == '2'}">待盘点</span>
                        <span :class="{ 'active' : detailData.status == '3'}">开始盘点</span>
                        <span :class="{ 'active' : detailData.status == '4'}">结束盘点</span>
                        <span :class="{ 'active' : detailData.status == '6'}">确认盘点</span>
                    </div>
                </el-col>
            </el-row>
            <template v-if="detailData.status == '0' || detailData.status == '1' || detailData.status == '2'">
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>单据编号：</span>{{ detailData.code ? detailData.code : '暂无'}}
                    </el-col>
                    <el-col :span="9">
                        <span>业务日期：</span>{{ detailData.businessDate ? detailData.businessDate : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>计划开始：</span>{{ detailData.planStartTime ? detailData.planStartTime : '暂无'}}
                    </el-col>
                    <el-col :span="9">
                        <span>计划结束：</span>{{ detailData.planEndTime ? detailData.planEndTime : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>实际开始：</span>{{ detailData.startTime ? detailData.startTime : '暂无'}}
                    </el-col>
                    <el-col :span="9">
                        <span>实际结束：</span>{{ detailData.endTime ? detailData.endTime : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>盘点仓库：</span>{{ detailData.warehouseName ? detailData.warehouseName : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>盘点类型：</span>{{ detailData.stocktakingType == '0' ? '按仓库盘点' : detailData.stocktakingType == '1' ? '按产品盘点' : detailData.stocktakingType == '2' ? '按区域' : detailData.stocktakingType == '3' ? '按产品分类' : '暂无'}}
                    </el-col>
                </el-row>
                <template v-if="detailData.stocktakingType == '1'">
                    <el-row v-if="detailData.contentList && detailData.contentList.length > 0">
                        <el-col :span="9" class="mt20">
                            <div  v-for="(item, index) in detailData.contentList" :key="index" class="stock-item">
                                {{ item.specificationName }}
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="detailData.stocktakingType == '2'">
                    <el-row v-if="detailData.contentList && detailData.contentList.length > 0">
                        <el-col :span="9" class="mt20">
                            <div v-for="(item, index) in detailData.contentList" :key="index" class="stock-item">
                                {{ item.areaName }}
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="detailData.stocktakingType == '3'">
                    <el-row v-if="detailData.contentList && detailData.contentList.length > 0">
                        <el-col :span="9" class="mt20">
                            <div v-for="(item, index) in detailData.contentList" :key="index" class="stock-item">
                                {{ item.sortName }}
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>盘点负责人：</span>{{ detailData.personInCharge ? detailData.personInCharge : '暂无'}}
                    </el-col>
                    <el-col :span="9">
                        <span>库管：</span>{{ detailData.libraryTube ? detailData.libraryTube : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>备注：</span>{{ detailData.remark ? detailData.remark : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>创建人：</span>{{ detailData.remark ? detailData.remark : '暂无'}}
                    </el-col>
                    <el-col :span="9">
                        <span>创建时间：</span>{{ detailData.remark ? detailData.remark : '暂无'}}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="9">
                        <span>审核人：</span>{{ detailData.approveName ? detailData.approveName : '暂无'}}
                    </el-col>
                    <el-col :span="9">
                        <span>审核时间：</span>{{ detailData.approveTime ? detailData.approveTime : '暂无'}}
                    </el-col>
                </el-row>
            </template>
            <template v-if="detailData.status == '3' || detailData.status == '4' || detailData.status == '5' || detailData.status == '6' || detailData.status == '7'">
                <el-row class="detail-item">
                    <el-col :span="8">
                        <span>单据编号：</span>{{ detailData.code ? detailData.code : '暂无'}}
                    </el-col>
                    <el-col :span="8">
                        <span>业务日期：</span>{{ detailData.businessDate ? detailData.businessDate : '暂无'}}
                    </el-col>
                    <el-col :span="8" v-if="detailData.status == '3'">
                        <ul class="scan" style="width:60%;">
                            <li v-for="(item, index) in scanList" :key="index" @click="changeScan(index)" :class="{'active' : index == current }">{{ item }}</li>
                        </ul>
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="8">
                        <span>盘点仓库：</span>{{ detailData.warehouseName ? detailData.warehouseName : '暂无'}}
                    </el-col>
                    <el-col :span="8">
                        <span>盘点类型：</span>{{ detailData.stocktakingType == '0' ? '按仓库盘点' : detailData.stocktakingType == '1' ? '按产品盘点' : detailData.stocktakingType == '2' ? '按区域' : detailData.stocktakingType == '3' ? '按产品分类' : '暂无'}}
                    </el-col>
                </el-row>
                <input v-model="code"
                    ref="getFocus"
                    class="input-data"
                    type="password"
                    @keydown.enter="numberEnterDown()"
                    @keyup.enter="numberEnterUp()"
                />
                <el-row class="status-title">
                    <div class="mt20 ml10">盘点表清单</div>
                </el-row>
                <el-table :data="detailData.detailList">
                    <el-table-column label="序号" type="index" align="center" width="50" />
                    <el-table-column label="产品名称" align="center" prop="specificationName" />
                    <el-table-column label="批次号" align="center" prop="batchNumber" />
                    <template v-if="detailData.countingTimes == '1'">
                        <el-table-column label="一盘数量" align="center" prop="count">
                            <template slot-scope="scope">
                                <template v-if="detailData.status == '3'">
                                    <template v-if="scope.row.scanCode == '0'">
                                        <el-input placeholder="扫码盘点" v-model="scope.row.count" disabled />
                                        </template>
                                    <template v-else>
                                        <el-input placeholder="请输入" v-model="scope.row.count" @input="(val) => inputEdit(val, scope.row, 'count')" @blur="(val) => onBlurEdit(val, scope.row, 'count')" />
                                    </template>
                                </template>
                                <template v-else>
                                    {{ scope.row.count }}
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="detailData.countingTimes == '2'">
                        <el-table-column label="一盘数量" align="center" prop="count" />
                        <el-table-column label="二盘数量" align="center" prop="secondCount">
                            <template slot-scope="scope">
                                <template v-if="detailData.status == '3'">
                                    <template v-if="scope.row.scanCode == '0'">
                                        <el-input placeholder="扫码盘点" v-model="scope.row.secondCount" disabled />
                                        </template>
                                    <template v-else>
                                        <el-input placeholder="请输入" v-model="scope.row.secondCount" @input="(val) => inputEdit(val, scope.row, 'secondCount')" @blur="(val) => onBlurEdit(val, scope.row, 'secondCount')" />
                                    </template>
                                </template>
                                <template v-else>
                                    {{ scope.row.secondCount }}
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="detailData.countingTimes == '3'">
                        <el-table-column label="一盘数量" align="center" prop="count" />
                        <el-table-column label="二盘数量" align="center" prop="secondCount" />
                        <el-table-column label="三盘数量" align="center" prop="threeCount">
                            <template slot-scope="scope">
                                <template v-if="detailData.status == '3'">
                                    <template v-if="scope.row.scanCode == '0'">
                                        <el-input placeholder="扫码盘点" v-model="scope.row.threeCount" disabled />
                                        </template>
                                    <template v-else>
                                        <el-input placeholder="请输入" v-model="scope.row.threeCount" @input="(val) => inputEdit(val, scope.row, 'threeCount')" @blur="(val) => onBlurEdit(val, scope.row, 'threeCount')" />
                                    </template>
                                </template>
                                <template v-else>
                                    {{ scope.row.threeCount }}
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="detailData.status == '4' || detailData.status == '5' || detailData.status == '6'">
                        <el-table-column label="库存数量" align="center" prop="store" />
                        <el-table-column label="差异数量" align="center" prop="differenceCount">
                            <template slot-scope="scope">
                                <span style="color:red;">{{ scope.row.differenceCount }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </template>
        </div>
        <!-- 审核 -->
        <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
            <el-row>
                <el-col :span="24">
                    <textarea
                        class="approve-textarea"
                        v-model="approveRemark"
                        type="textarea"
                        placeholder="请输入意见和看法"
                    />
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="btn-success mr20 width100"
                    @click="agreeApprove()"
                >同意</el-button>
                <el-button
                    type="primary"
                    class="btn-cancel width100"
                    @click="disagreeApprove()"
                >拒绝</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { stocktakingDetail, stocktakingCheck, startStocktaking, endStocktaking, againStocktaking, endAgainStocktaking, confirmDifferenceStocktaking, resultConfirm, revokeConfirm, scanCode, deleteScanCode, stocktakingDataEdit } from "@/api/system/stocktaking/stocktaking"
export default {
    name: "detail",
    data() {
        return {
            id: '',
            detailData: '',
            open: false,
            approveRemark: '',
            scanList: ['正常扫码', '删除扫码'],
            code: '',
            current: -1, // 0 正常扫码 1 删除扫码
        }
    },
    created(){
        this.id = this.$route.query.id
        this.getDetailData()
    },
    methods: {
        // 获取详情数据
        getDetailData(){
            stocktakingDetail(this.id).then(res => {
                this.detailData = res.data
                if(res.data.detailList && res.data.detailList.length > 0){
                    res.data.detailList.forEach(i => {
                        if(res.data.countingTimes == '1'){
                            if(i.count == 0){
                                i.count = ''
                            }
                        }
                        if(res.data.countingTimes == '2'){
                            if(i.secondCount == 0){
                                i.secondCount = ''
                            }
                        }
                        if(res.data.countingTimes == '3'){
                            if(i.threeCount == 0){
                                i.threeCount = ''
                            }
                        }
                    })
                }
            })
        },
        // 审核
        check(){
            this.open = true
        },
        // 通过
        agreeApprove(){
            stocktakingCheck(this.id, '2', '1', this.approveRemark).then(res => {
                if(res.code == 200){
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 拒绝
        disagreeApprove(){
            stocktakingCheck(this.id, '1', '2', this.approveRemark).then(res => {
                if(res.code == 200){
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 开始盘点
        startStock(){
            startStocktaking(this.id).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 结束盘点
        endStock(){
            endStocktaking(this.id).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 再次盘点
        againStock(){
            this.$modal.confirm('是否再次盘点？', '再次盘点').then(() => {
                againStocktaking(this.id).then(res => {
                    if(res.code == 200){
                        this.$modal.msgSuccess("操作成功")
                        this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                    }
                })
            }).catch(action => {
                if(action == 'cancel'){
                    endStocktaking(this.id).then(res => {
                        if(res.code == 200){
                            this.$modal.msgSuccess("操作成功")
                            this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                        }
                    })
                }
            })
        },
        // 确认差异
        confirmDifference(){
            confirmDifferenceStocktaking(this.id).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 结束盘点再次盘点
        endAgainStock(){
            endAgainStocktaking(this.id).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 结果确定
        confirmStock(){
            resultConfirm(this.detailData).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 撤消确认
        cancelStock(){
            revokeConfirm(this.id).then(res => {
                if(res.code == 200){
                    this.$modal.msgSuccess("操作成功")
                    this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/stocktaking" })
                }
            })
        },
        // 切换扫码出库/删除扫码
        changeScan(index){
            this.current = index
            this.code = ''
            if(index == 1){
                this.$modal.msgError("删除扫码")
            }else{
                this.$modal.msgSuccess("扫码出库")
            }
            this.$refs.getFocus.focus()
        },
        // 扫码
        numberEnterDown() {
            this.keyDownTime = new Date().getTime()
        },
        numberEnterUp() {
            this.keyUpTime = new Date().getTime()
            if (this.keyUpTime - this.keyDownTime < 30) {
                // 扫码枪触发
                let newCode = this.common.codeRule(this.code)
                // let code = this.code.split("=")
                // let newCode = code[code.length-1]
                if(newCode.length == 13 || newCode.length == 20){
                    if(this.current == 0){
                        // 扫码出库
                        scanCode({stocktakingOrderId: this.id, code: newCode, countingTimes: this.detailData.countingTimes, stocktakingType: this.detailData.stocktakingType}).then(res => {
                            if(res.code == 200){
                                this.code = ''
                                this.getDetailData()
                                this.$modal.msgSuccess("扫码成功")
                            }else{
                                this.code = ''
                                this.$modal.msgError(res.msg)
                            }
                        })
                    }else{
                        // 删除扫码
                        deleteScanCode({stocktakingOrderId: this.id, code: newCode, countingTimes: this.detailData.countingTimes, stocktakingType: this.detailData.stocktakingType}).then(res => {
                            if(res.code == 200){
                                this.code = ''
                                this.getDetailData()
                                this.$modal.msgSuccess("删除成功")
                            }else{
                                this.code = ''
                                this.$modal.msgError(res.msg)
                            }
                        })
                    }
                }else{
                    this.code = ''
                    this.$refs.getFocus.focus()
                    this.$modal.msgError('扫码错误，请重新扫码!')
                }
            }else{
                // 直接按键盘触发
                // console.log(this.code)
                let newCode = this.common.codeRule(this.code)
                // let code = this.code.split("=")
                // let newCode = code[code.length-1]
                if(newCode.length == 13 || newCode.length == 20){
                    if(this.current == 0){
                        // 扫码出库
                        scanCode({stocktakingOrderId:this.id, code: newCode, countingTimes: this.detailData.countingTimes, stocktakingType: this.detailData.stocktakingType}).then(res => {
                            if(res.code == 200){
                                this.code = ''
                                this.getDetailData()
                                this.$modal.msgSuccess("扫码成功")
                            }else{
                                this.code = ''
                                this.$modal.msgError(res.msg)
                            }
                        })
                    }else{
                        // 删除扫码
                        deleteScanCode({stocktakingOrderId:this.id, code: newCode, countingTimes: this.detailData.countingTimes, stocktakingType: this.detailData.stocktakingType}).then(res => {
                            if(res.code == 200){
                                this.code = ''
                                this.getDetailData()
                                this.$modal.msgSuccess("删除成功")
                            }else{
                                this.code = ''
                                this.$modal.msgError(res.msg)
                            }
                        })
                    }
                }else{
                    this.code = ''
                    this.$refs.getFocus.focus()
                    this.$modal.msgError('扫码错误，请重新扫码!')
                }
            }
        },
        // 数量验证
        inputEdit(val, row, type){
            // console.log(row)
            if(val == '' || val == undefined){
                this.$modal.msgError('数量不能为空!')
            }else{
                if(/^[1-9]\d*$|^0$/.test(val) == false){
                    this.$modal.msgError('数量必须是数字！')
                    if(type == 'count'){
                        row.count = ''
                    }else if(type == 'secondCount'){
                        row.secondCount = ''
                    }else if(type == 'threeCount'){
                        row.threeCount = ''
                    }
                    return false
                }else{
                    if(JSON.parse(val) <= 0){
                        if(type == 'count'){
                            row.count = ''
                        }else if(type == 'secondCount'){
                            row.secondCount = ''
                        }else if(type == 'threeCount'){
                            row.threeCount = ''
                        }
                        this.$modal.msgError('数量必须大于0!')
                    }
                }
            }
        },
        // 保存盘点数量
        onBlurEdit(val, row, type){
            let obj = {}
            if(type == 'count'){
                obj = {
                    id: row.id,
                    count: row.count,
                    countingTimes: this.detailData.countingTimes
                }
            }else if(type == 'secondCount'){
                obj = {
                    id: row.id,
                    secondCount: row.secondCount,
                    countingTimes: this.detailData.countingTimes
                }
            }else if(type == 'threeCount'){
                obj = {
                    id: row.id,
                    threeCount: row.threeCount,
                    countingTimes: this.detailData.countingTimes
                }
            }
            stocktakingDataEdit(obj).then(res => {
                if(res.code == 200){
                    this.getDetailData()
                }
            })
        }
    }
}
</script>

<style scoped>
.stock-item {
    margin-left: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 25px;
    font-size: 14px;
}
.status-title {
    font-size: 14px;
}
</style>